<template>
	<view class="container">
		<view v-if="listInfo.length == 0" style="width: 100%;height: 80upx;margin-top: 20upx;text-align: center;font-size: 30upx;line-height: 80upx;">
			没有任何记录
		</view>
		<block v-else>
			<scroll-view scroll-y class="scrollView">
				<block v-for="(item,index) in listInfo" :key="index">
					<view class="partOutContainer" v-if="item.leaveInfoStatus != 5">
						<view class="partContainer" @click="getProcess(item.leaveInfoId)">
							<view class="top">
								<view class="leaveType">
									请假类型:
									<view class="leaveTypeText" v-if="item.leaveInfoType == 0">
										少于三天
									</view>
									<view class="leaveTypeText" v-else-if="item.leaveInfoType == 1">
										超过三天少于一周
									</view>
									<view class="leaveTypeText" v-else-if="item.leaveInfoType == 2">
										超过一周
									</view>
								</view>
								<view class="leaveReason">
									原因:
									<view class="leaveResonText">
										<block v-if="item.leaveInfoReason.length > 23">
											{{item.leaveInfoReason.substring(0,23)}}......
										</block>
										<block v-else>
											{{item.leaveInfoReason}}
										</block>
									</view>
								</view>
							</view>
							<view class="bottom">
								<view class="editTime">
									申请时间:
									<view class="timeText">
										{{item.leaveInfoStart}}
									</view>
								</view>
								<view class="edit">
									<view class="editR">
										<block v-if="item.leaveInfoStatus == 0">
											<text class="pass0">
												待审批
											</text>
										</block>
										<block v-else-if="item.leaveInfoStatus == 1">
											<text class="pass1">
												已通过
											</text>
										</block>
										<block v-else-if="item.leaveInfoStatus == 2">
											<text class="pass2">
												院系领导审批中
											</text>
										</block>
										<block v-else-if="item.leaveInfoStatus == 3">
											<text class="pass3">
												校级领导审批中
											</text>
										</block>
										<block v-else-if="item.leaveInfoStatus == 4">
											<text class="pass4">
												已拒绝
											</text>
										</block>
										<block v-else-if="item.leaveInfoStatus == 5">
											<text class="pass5">
												<!-- 存档中 不需要显示 -->
											</text>
										</block>
										<block v-else-if="item.leaveInfoStatus == 6">
											<text class="pass6">
												已销假
											</text>
										</block>
									</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</block>
	</view>
</template>

<script>
	export default {
		props:["listInfo"],
		methods:{
			getProcess(id){
				// console.log("获取进程"+id)
				uni.navigateTo({
					url:"/pages/component/processInfo?id="+id
				})
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background-color: rgba(248,248,249,1);
	}
	.container{
		width: 100%;
		height: 100%;
		padding: 10upx 0 30upx 0;
		/* background-color: rgba(248,248,249,1); */
	}
	.scrollView{
		width: 100%;
		height: 100%;
		padding: 30upx 30upx 10upx 30upx;
		/* background-color: white; */
	}
	.partOutContainer{
		width: 94%;
		margin-left: 3%;
		height: 260upx;
		padding-bottom: 30upx;
	}
	.partContainer{
		width: 100%;
		height: 230upx;
		padding: 20upx 20upx 5upx 20upx;
		background-color: white;
		border-radius: 0.3em;
		position: relative;
		box-shadow: 1px 1px 1px 1px rgba(208, 208, 208, 1.0);
	}
	.top{
		width: 100%;
		display: flex;
		height: 120upx;
	}
	.leaveType{
		font-size: 32upx;
		font-weight: 600;
		height: 60upx;
		color: black;
		float: left;
		width: 40%;
		display: inline-block;
	}
	.leaveTypeText{
		color: gray;
		font-size: 28upx;
		font-weight: 500;
	}
	.leaveReason{
		float: right;
		width: 60%;
		font-size: 32upx;
		font-weight: 600;
		height: 60upx;
		color: black;
		display: inline-block;
	}
	.leaveResonText{
		color: gray;
		font-size: 28upx;
		font-weight: 500;
	}
	.bottom{
		width: 100%;
		display: flex;
		height: 80upx;
	}
	.editTime{
		font-size: 32upx;
		font-weight: 600;
		height: 40upx;
		color: black;
		float: left;
		width: 40%;
	}
	.timeText{
		color: gray;
		font-size: 28upx;
		font-weight: 500;
	}
	.edit{
		float: right;
		position: absolute;
		right: 31upx;
		font-weight: 500;
		font-size: 30upx;
		bottom: 20upx;
		display: flex;
	}
	.editR{
		
	}
	/* 待审批 */
	.pass0{
		color: #0000ff;
		text-decoration: underline;
	}
	/* 已审批 */
	.pass1{
		color: #00ff00;
		text-decoration: underline;
	}
	/* 院系领导审批中 */
	.pass2{
		color: #ffaa00;
		text-decoration: underline;
	}
	/* 校级领导审批中 */
	.pass3{
		color: #ffaa00;
		text-decoration: underline;
	}
	/* 已拒绝 */
	.pass4{
		color: #ff0000;
		text-decoration: underline;
	}
	/* 用户存档 不显示就不要了 */
	.pass5{
		color: #a9ebff;
		text-decoration: underline;
	}
	/* 已销假 */
	.pass6{
		color: #838383;
		text-decoration: underline;
	}
</style>
